<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getRequest, postPutRequest} from "@/api/data.ts";
import {FormInst, useMessage} from 'naive-ui';

const message = useMessage()
//客服设置
const loadings = ref<boolean>(false);
const btnLoading = ref<boolean>(false);

//提现设置
interface withdrawalForm {
  user_min_money?: number | null | undefined,
  user_max_money?: number | null | undefined,
  user_fees?: number | null | undefined,
  teacher_min_money?: number | null | undefined,
  teacher_max_money?: number | null | undefined,
  teacher_fees?: number | null | undefined,
}

const withdrawal_form = ref<FormInst | null>(null);
const withdrawalForm = ref<withdrawalForm>({
  user_min_money: null,
  user_max_money: null,
  user_fees: null,
  teacher_min_money: null,
  teacher_max_money: null,
  teacher_fees: null,
})
const withdrawalFormRules = ref({})

const handelSave = (e: MouseEvent) => {
  e.preventDefault();
  btnLoading.value = true;
  postPutRequest('conf/save_withdrawal', withdrawalForm.value).then((result: ResponseResult) => {
    if (result.code === 200) {
      message.success(result.message, {
        duration: 1500,
        onLeave() {
          btnLoading.value = false;
        }
      })
    } else {
      message.error(result.message);
      btnLoading.value = false;
    }
  })
}
//获取配置参数
const getSettings = async () => {
  await getRequest('conf/get_settings', {type: 'withdrawal'}, true).then((result: ResponseResult) => {
    const {data} = result;
    const {withdrawal} = JSON.parse(data);
    if (withdrawal) {
      withdrawalForm.value = {
        user_min_money: parseFloat(withdrawal.user_min_money) ?? null,
        user_max_money: parseFloat(withdrawal.user_max_money) ?? null,
        user_fees: parseFloat(withdrawal.user_fees) ?? null,
        teacher_min_money: parseFloat(withdrawal.teacher_min_money) ?? null,
        teacher_max_money: parseFloat(withdrawal.teacher_max_money) ?? null,
        teacher_fees: parseFloat(withdrawal.teacher_fees) ?? null,
      };
    }
    loadings.value = false;
  })
}
onMounted(() => {
  loadings.value = true;
  getSettings()
})
</script>

<template>
  <n-form
      ref="withdrawal_form"
      :model="withdrawalForm"
      :rules="withdrawalFormRules"
      require-mark-placement="left"
      label-placement="left" :label-width="110">
    <n-spin size="medium" v-model:show="loadings">
      <p><span class="titles">用户提现设置</span></p>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="最低提现金额" path="user_min_money">
          <div style="width: 100%">
            <n-input-group>
              <n-input-number v-model:value="withdrawalForm.user_min_money"
                              style="width: 200px" :show-button="false"
                              :precision="2"
                              clearable placeholder="用户最低提现金额"/>
              <n-input-group-label>元</n-input-group-label>
            </n-input-group>
            <p class="tips_p" style="margin-block-start: 0.5em;">会员提现需满足最低提现金额。才能提交提现申请。</p>
          </div>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="最高提现金额" path="user_max_money">
          <n-input-group>
            <n-input-number v-model:value="withdrawalForm.user_max_money"
                            style="width: 200px" :show-button="false"
                            :precision="2"
                            clearable placeholder="用户最高提现金额"/>
            <n-input-group-label>元</n-input-group-label>
          </n-input-group>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="提现手续费" path="user_fees">
          <div style="width: 100%">
            <n-input-group>
              <n-input-number v-model:value="withdrawalForm.user_fees"
                              style="width: 200px" :show-button="false"
                              clearable placeholder="请输入用户提现手续费"/>
              <n-input-group-label>%</n-input-group-label>
            </n-input-group>
            <p class="tips_p" style="margin-block-start: 0.5em;">会员提现需满足最低提现金额。才能提交提现申请。</p>
          </div>
        </n-form-item-gi>
      </n-grid>
      <p><span class="titles">教师提现设置</span></p>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="最低提现金额" path="teacher_min_money">
          <div style="width: 100%">
            <n-input-group>
              <n-input-number v-model:value="withdrawalForm.teacher_min_money"
                              style="width: 200px" :show-button="false"
                              :precision="2"
                              clearable placeholder="教师最低提现金额"/>
              <n-input-group-label>元</n-input-group-label>
            </n-input-group>
            <p class="tips_p" style="margin-block-start: 0.5em;">会员提现需满足最低提现金额。才能提交提现申请。</p>
          </div>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="最高提现金额" path="teacher_max_money">
          <n-input-group>
            <n-input-number v-model:value="withdrawalForm.teacher_max_money"
                            style="width: 200px" :show-button="false"
                            :precision="2"
                            clearable placeholder="教师最高提现金额"/>
            <n-input-group-label>元</n-input-group-label>
          </n-input-group>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="提现手续费" path="teacher_fees">
          <div style="width: 100%">
            <n-input-group>
              <n-input-number v-model:value="withdrawalForm.teacher_fees"
                              style="width: 200px" :show-button="false"
                              clearable placeholder="请输入教师提现手续费"/>
              <n-input-group-label>%</n-input-group-label>
            </n-input-group>
            <p class="tips_p" style="margin-block-start: 0.5em;">会员提现需满足最低提现金额。才能提交提现申请。</p>
          </div>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="&nbsp;" >
          <n-button type="primary" :loading="btnLoading" @click="handelSave">保存提现设置</n-button>
        </n-form-item-gi>
      </n-grid>
    </n-spin>
  </n-form>
</template>

<style scoped lang="scss">

</style>